<script setup>
import { getHotCity } from "@/api/City/HotCity";
import { ref, onMounted } from "vue";
import { useCityStore } from "@/stores/city";
const cityStore = useCityStore();
const hotCity = ref([]);

onMounted(async () => {
  hotCity.value = await getHotCity();
  // console.log(hotCity.value)
});

const handleClick = (cityName) => {
  cityStore.setNowCity(cityName);
  cityStore.addCityList(cityName);
}
</script>

<template>
  <div class="my-city-btn">
      <div class="now-city">
        <div class="descriptions">当前城市</div>
        <el-button tag="a" href="/" size="large" rel="noopener noreferrer" type="success">{{ cityStore.nowCity }}</el-button>
      </div>
      <div class="local-city">
        <div class="descriptions">定位/最近访问</div>
        <el-button tag="a" href="/" size="large" rel="noopener noreferrer" @click="handleClick(cityStore.loaclCity)">
          <img src="@/assets/images/地点.png" alt="">
          {{ cityStore.loaclCity }}</el-button>
        <el-button tag="a" href="/" size="large" rel="noopener noreferrer" v-for="(item, index) in cityStore.cityList"
          :key="index" @click="handleClick(item)">
          {{ item }}
        </el-button>
      </div>
      <div class="hot-city">
        <div class="descriptions">热门城市</div>
        <el-button tag="a" href="/" size="large" rel="noopener noreferrer" v-for="(item, index) in hotCity" :key="index"
          @click="handleClick(item.name)">
          {{ item.name }}
        </el-button>
      </div>
  </div>
</template>
<style scoped>
.descriptions {
  width: 100%;
  background-color: #eee;
  font-size: 16px;
  padding: 10px;
  color: #656;
  margin: 10px 0;
}

img {
  width: 20px;
  height: 20px;
}
</style>